import { View, Text, Picker } from '@tarojs/components'

export const Select = ({
  title,
  value,
  options,
  rangeKey,
  valueKey,
  onChange,
  placeholder = '请选择',
  required = false,
  disabled = false,
  className = ''
}) => {
  // 获取当前选中的选项
  const selectedOption = options.find(option => option[valueKey] === value)
  const selectedIndex = options.findIndex(option => option[valueKey] === value)

  return (
    <View className={`flex items-center border-b border-gray-100 ${className}`}>
      <View className="flex items-center px-4 py-3 min-w-[120px]">
        <Text className="text-base">{title}</Text>
      </View>
      <Picker
        mode="selector"
        range={options}
        rangeKey={rangeKey}
        value={[selectedIndex > -1 ? selectedIndex : 0]}
        onChange={onChange}
        disabled={disabled}
      >
        <View
          className={`flex-1 p-2 text-sm ${
            selectedOption ? 'text-gray-950' : 'text-gray-400'
          } ${disabled ? 'opacity-50' : ''}`}
        >
          {selectedOption ? selectedOption[rangeKey] : placeholder}
        </View>
      </Picker>
    </View>
  )
}
